vue3的tsx写法(v

#vue3的tsx写法(v| 来源: 网络整理| 查看: 265

1、如下就是vue3的tsx写法，tsx写法中支持使用v-show，如下：

import {ref} from 'vue' let appData = ref(''); let flag = false; const renderDom = () => { return ( flag}> {appData.value}111111 appData.value}222222 ) } export default renderDom

引入app.vue中如下：

我是根组件 // 导入 RouterView import { provide, ref } from 'vue' import { RouterView } from "vue-router"; import renderDom from './App.tsx' provide('flag', ref(false)) html, body, #app { height: 100%; width: 100%; color: #fff; .app_tsx{ color:red; font-size:30px; } }

2、当我们在tsx中使用v-if的时候，就会报错

import {ref} from 'vue' let appData = ref(''); let flag = false; const renderDom = () => { return ( flag}> {appData.value}111111 appData.value}222222 ) } export default renderDom

在这里插入图片描述那么不能使用v-if我们可以这样使用：(三目运算符)

import {ref} from 'vue' let appData = ref(''); let flag = false; const renderDom = () => { return ( flag? {appData.value}111111 : {appData.value}222222 } ) } export default renderDom

3、既然v-if不可以在tsx语法糖中使用，那么v-for呢？如下：

import {ref} from 'vue' let appData = ref(''); let arr = [1,2,3,4,5,6,7,8] const renderDom = () => { return ( item in arr}> ) } export default renderDom

v-for这么使用也是报错：如下在这里插入图片描述那么我们该如何实现呢？如下(tsx中的v-for正确用法✅)：

import {ref} from 'vue' let appData = ref(''); let arr = [1,2,3,4,5,6,7,8] const renderDom = () => { return ( arr.map(item => { return (${ item}) })} ) } export default renderDom

4、v-bind在tsx中的用法 ❎错误用法：

import {ref} from 'vue' let appData = ref(''); let arr = [1,2,3,4,5,6,7,8] const renderDom = () => { return ( arr.map(item => { return ( item}) })} ) } export default renderDom

在这里插入图片描述 ✅正确写法如下：

import {ref} from 'vue' let appData = ref(''); let arr = [1,2,3,4,5,6,7,8] const renderDom = () => { return ( arr.map(item => { return ( item}) })} ) } export default renderDom

5、v-on在tsx中用法 ❎错误用法

import {ref} from 'vue' let appData = ref(''); let arr = [1,2,3,4,5,6,7,8] const renderDom = () => { return ( arr.map(item => { return ( item}) })} ) } const handleClick = () => { console.log(1111) } export default renderDom

✅正确用法：(不可以使用修饰符)

import {ref} from 'vue' let appData = ref(''); let arr = [1,2,3,4,5,6,7,8] const renderDom = () => { return ( arr.map(item => { return ( item}) })} ) } const handleClick = (item:number) => { console.log(item) } export default renderDom

6、tsx的props传值(父组件给子组件传值)

①父组件

②子组件props

import {ref} from 'vue' type Props = { title:string } const renderDom = (props:Props) => { return ( {props.title} ) } export default renderDom

7、子组件给父组件传值 ①子组件

import {ref} from 'vue' type Props = { title:string } const renderDom = (props:Props,ctx:any) => { return ( ctx.emit('on-click',220) } export default renderDom

②父组件

我是根组件 // 导入 RouterView import { provide, ref } from 'vue' import { RouterView } from "vue-router"; import renderDom from './App.tsx' provide('flag', ref(false)) const handleEmit=(val:number)=>{ console.log(val) } html, body, #app { height: 100%; width: 100%; color: #fff; .app_tsx{ color:red; font-size:30px; } }

【本文地址】

公司简介

联系我们